iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 4
0
自我挑戰組

與Vue相遇系列 第 4

Day04-v-model雙向綁定

  • 分享至 

  • xImage
  •  

說了v-bind,綁定了數據資料,使的我們在管理資料上面更加容易。但怎麼看都是單方面的,並且除了在標籤屬性上面有做資料管理外,這到底還能夠做什麼呢?

Vue:其實阿!v-bind常用在表單綁定,像是input、textarea、radio、select或其他元素等,都很常用到喔!!

如下,透過v-bind將資料傳遞給input:

<div class="container">
 
            表單常使用v-bind:<input type="text" :value="inputData">
 
 </div>
data() {
            return {
                inputData: "v-bind綁定數據資料喔~",
             }
}

https://ithelp.ithome.com.tw/upload/images/20200918/20130654djy3kb9EDY.jpg
以圖示來說,如下:
https://ithelp.ithome.com.tw/upload/images/20200918/201306546CilEIXJDY.jpg
我:如果是這樣,那有辦法從畫面改變資料,進一步影響數據嗎?

Vue看了我,又笑了一笑。隨手切換了畫面,問了我:你知道v-model嗎?
https://ithelp.ithome.com.tw/upload/images/20200918/20130654XfcrJUlVIu.jpg
我看了看這張圖,難道她想和我說,可以透過view來輕易的改變data?

Vue再次切換到了VS code,並且用迅雷不及掩耳的速度舉了差不多的範例。唯一不同的是,這次沒有看到v-bind,而是換做了v-model。

<div class="container">
 
            表單常使用v-model:<input type="text" v-model="inputData">
 
</div>
 
 <pre>
           查看data資料: {{inputData}}
 </pre>
data() {
            return {
                inputData: "v-bind綁定數據資料喔~",
             }
}

我看了看網頁顯示的結果,內心微微一笑,這不一樣嘛,還是把data資料給予view:
https://ithelp.ithome.com.tw/upload/images/20200918/20130654xPDNgjL6ns.jpg
但神奇的事情來了。當Vue開始按下backspace按鍵,資料內容居然同步改變:
https://ithelp.ithome.com.tw/upload/images/20200918/20130654nWKpRV4woV.jpg
https://ithelp.ithome.com.tw/upload/images/20200918/20130654EjXkcvUh7a.jpg
這效果,讓我感到非常興奮。原本用JS要寫好多步驟,但現在一個v-model就搞定,這真是太爽了!!但問題是,為何我還需要v-bind呢?他們的差異在於哪呢?

Vue:其實,在上述例子當中,v-model對於input、textarea、select這種單獨項目中,優先權都會高於v-bind。所以在這種單獨的input中,雖然v-bind失效,但不會造成任何錯誤。因此,同時使用v-bind及v-model是沒有必要的!!

如果是輸入一組資料,那同時使用v-bind和v-model,就各自有各自的功用,如下:

<div class="container">
 
    <label v-for="value in options">
 
       表單:<input type="checkbox" :value="value" v-model="selected">
 
     </label>
 
 </div>
 
 <pre>
        查看data中selected資料: {{selected}}
 </pre>
 <pre>
         查看data中options資料:{{options}}
 </pre>
data() {
            return {
                options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
                selected: []
      }
}

https://ithelp.ithome.com.tw/upload/images/20200918/20130654e3zEmZ0Olb.jpg
顯示結果下:在還未勾選情況下,v-bind把畫面10個選單渲染出來;而v-model則負責選重後的結果。如下:
https://ithelp.ithome.com.tw/upload/images/20200918/20130654S8dcQdl8bd.jpg
Vue:妳看,是不是很精準且快速的把view和model結合。再次為你做個結論吧!

  1. v-bind是單向數據綁定
  2. v-model是雙向數據綁定
  3. 需要分清楚單獨資料操作還是一組資料操作

雖然,內心還是許多疑問,但對於客戶表單數據經常改動下,那真是太棒了!!

待續......


上一篇
Day03-v-bind屬性綁定
下一篇
Day05-Virtual DOM與畫面渲染(一:基本探討)
系列文
與Vue相遇30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言